page {
	background: $uni-bg-color-grey;
}

.content {
	padding-top: 96upx;
}

.navbar {
	position: fixed;
	left: 0;
	top: var(--window-top);
	display: flex;
	width: 100%;
	height: 80upx;
	background: #ffffff;
	box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30upx;
		color: $uni-text-color-dark;
		position: relative;

		&.current {
			color: $uni-text-color;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid $uni-text-color-red;
			}
		}
		
		
		.p-box {
			display: flex;
			flex-direction: column;
		
			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				margin-left: 4upx;
				font-size: 26upx;
				color: $uni-text-color;
		
				&.active {
					color: $uni-bg-color-pink;
				}
				
			}
		
			.up {
				transform: rotate(270deg);
			}
			
			.down {
				transform: rotate(90deg);
			}
			
		}
		
	}
}
